<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.menu {float: left;list-style-type: none;height:30px;line-height:30px;border-right:solid 1px #ccc;float:left;padding:0;margin:0;}
.menu li{float:left;width:100px;text-align:center;border:solid 1px #ccc;border-right:none;cursor:pointer;}
.main{float:left;clear:left;margin-bottom:20px;	}
.menu .on{border-top:solid 1px #a40000;border-bottom:solid 1px #fff;}
.tab{height:200px;width:403px;float:left;clear:both;border:solid 1px #ccc;border-top:none;line-height:200px;text-align:center; display: none;}
</style>
</head>

<body>
<div class='tabs'>
	<ul class="menu">
		<li class="on">AAA</li>
	    <li>BBB</li>
	    <li>CCC</li>
	    <li>DDD</li>
	</ul>
	<div class="main">
	    <div class="tab" style="display:block;">AAA</div>
	    <div class="tab">BBB</div>
	    <div class="tab">CCC</div>
	    <div class="tab">DDD</div>
	</div>
</div>

<div style='clear:both'></div>

<div class='tabs'>
	<ul class="menu">
		<li class="on">AAA</li>
	    <li>BBB</li>
	    <li>CCC</li>
	    <li>DDD</li>
	</ul>
	<div class="main">
        <div class="tab" style="display:block;">AAA</div>
        <div class="tab">BBB</div>
        <div class="tab">CCC</div>
        <div class="tab">DDD</div>
    </div>
</div>


<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="TabSwitch.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('.tabs').myTab({
        operate:'mouseover',
        time:3000,
        auto:true,
        delayTime: 0
    })
});

</script>
</body>
</html>
